<template>
    <view>
		<view :class="'m-taber ' + (disabled ? 'm-taber-disabled' : '')" :style="'width:'+maxWidth+'rpx'">
            <view v-for="(item, index) in optionsList" :key="index" :class="['m-taber-item' , value == item.value?'m-taber-item-active':'']" :style="itemWidth?'width:'+itemWidth+'rpx':''" @click="change(item.value)">{{item.name||item.text||item.label||item}}</view>
        </view>
        </view>
</template>

<script>
	export default {
		name: 'r-radio-button',
        model:{
        	prop: "value",
        	event: "change"
        },
		props: {
			list:{
                default: []
            },
            width:{
                type: Number,
                default: 476
            },
            itemWidth:{
                type: Number,
                default: 0
            },
            value: {
                default: 0
            },
			disabled: {
				type: Boolean,
				default: false
			}
		},
        computed:{
            optionsList(){
                let options = JSON.parse(JSON.stringify(this.list));
                let count = 0;
                let optionsList = options.map(res=>{
                    if(typeof res == "object"){
                        return res
                    }else{
                        let temp  ={
                            text: res,
                            value: count++
                        }
                        return temp
                    }
                })
                return optionsList
            },
            maxWidth(){
                let options = JSON.parse(JSON.stringify(this.list))||[];
                if(this.itemWidth>0){
                    return (this.itemWidth+8) * options.length
                }else{
                    return this.width
                }
            }
            
        },
		data() {
			return {
			}
		},
		methods: {
			change(value) {
                if(this.value !== value){
                    this.$emit('change', value);
                }
				
			},
		}
	};
</script>

<style lang="scss" scoped>
	// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错  @include vue-flex;
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}
    .m-taber{
        width: 100%;
        @include vue-flex;
        justify-content: space-between;
        background: #F2F2F6;
        border-radius: 16rpx;
        padding: 4rpx;
        height: 60rpx;
        box-sizing: border-box;
    }
	.m-taber-disabled {
		opacity: 0.5;
		pointer-events: none;
	}
    .m-taber-item{
        width: 100%;
        height: 52rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #1C1D1F;
        line-height: 52rpx;
        white-space: nowrap;
        text-align: center;
        box-sizing: border-box;
    }
    .m-taber-item:last-child{
        margin-right: 0rpx;
    }
    .m-taber-item-active{
        background: #FEFFFF;
        border-radius: 14rpx;
        box-shadow: 0px 2px 8px 0px rgba(186, 186, 186, 0.5);
        font-weight: bold;
    }
	
 </style>
